<template>
  <div>
    <div class="image-list" v-for="item in images" :style="{width:dwidth+'px',height:dheight+'px'}">
      <img :src="item.thumb">
      <div class="image-list-cover" @click="onClick(item.image)"></div>
    </div>
    <Modal title="预览" v-model="imageVisible" footer-hide>
      <img :src="imagePath" v-if="imageVisible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
  export default {
    props: {
      images: {
        type: Array,
        required: true
      },
      dwidth: Number,
      dheight: Number
    },
    data () {
      return {
        imageVisible: false,
        imagePath: ''
      }
    },
    methods: {
      onClick (path) {
        this.imagePath = path
        this.imageVisible = true
      }
    }
  }
</script>
<style>
  .image-list {
      display: inline-block;
      /* width: 80px;
      height: 80px; */
      text-align: center;
      line-height: 40px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0,0,0,.2);
      margin-right: 4px;
      margin-top: 4px;
  }
  .image-list img {
      width: 100%;
      height: 100%;
  }
  .image-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,.6);
  }
  .image-list:hover .image-list-cover {
      display: block;
  }
</style>
